<template>
  <div class="home">
    <router-link to="/home/location"
      ><div class="location">{{ location }}</div></router-link
    >
    <router-link to="/home/search" class="search">
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          class="searchbox"
        />
      </form>
    </router-link>
    <!-- 顶部轮播 tab栏 -->
    <div class="top">
      <div class="my-swipe">
        <van-swipe :autoplay="3000" indicator-color="#CEA62A">
          <van-swipe-item v-for="item in homeInfo.banner" :key="item.id">
            <img class="banner" :src="item.image_url" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="tab">
        <router-link
          :to="`/category/list?id=${item.id}`"
          tag="div"
          v-for="item in homeInfo.channel"
          :key="item.id"
        >
          <img :src="item.icon_url" alt="" />
          <p class="tab-title">{{ item.name }}</p>
        </router-link>
      </div>
    </div>
    <div class="brand">
      <p class="title">品牌制造商直供</p>
      <div class="list">
        <div
          v-for="item in homeInfo.brandList"
          :key="item.id"
          class="image"
          @click="goProduct(item.id)"
        >
          <img :src="item.new_pic_url" alt="" />
          <div class="listtitle">
            <p class="big">{{ item.name }}</p>
            <span class="small">{{ item.floor_price }}元起</span>
          </div>
        </div>
      </div>
    </div>
    <div class="first">
      <router-link to="/home/list?id=1">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png"
          alt=""
        />
      </router-link>
    </div>
    <div class="firstswiper">
      <div
        class="firstswiper-div"
        v-for="item in homeInfo.newGoods"
        :key="item.id"
        @click="goInfo(item.id)"
      >
        <img :src="item.list_pic_url" alt="" />
        <div class="text">
          <p class="div-one">{{ item.name }}</p>
          <p class="div-two">{{ item.goods_brief }}</p>
          <p class="div-three">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <div class="first">
      <router-link to="/home/list?id=2">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png"
          alt=""
        />
      </router-link>
    </div>
    <div class="firstswiper">
      <router-link
        :to="`/category/list/info/${item.id}`"
        tag="div"
        class="firstswiper-div"
        v-for="item in homeInfo.hotGoods"
        :key="item.id"
      >
        <img :src="item.list_pic_url" alt="" />
        <div class="text">
          <p class="div-one">{{ item.name }}</p>
          <p class="div-two">{{ item.goods_brief }}</p>
          <p class="div-three">￥{{ item.retail_price }}</p>
        </div>
      </router-link>
    </div>
    <div class="special">
      <p class="title">专题精选</p>
      <div class="special-c">
        <div
          class="special-c-eg"
          v-for="item in homeInfo.topicList"
          :key="item.id"
          @click="homeClick(item.id)"
        >
          <img :src="item.scene_pic_url" alt="" />
          <p class="eg-title">
            {{ item.title }}
          </p>
          <span class="eg-price">{{ item.price_info }}元起</span>
          <p class="eg-content">{{ item.subtitle }}</p>
        </div>
      </div>
    </div>
    <div class="goodgoods">
      <div
        class="goodslist"
        v-for="item in homeInfo.newCategoryList"
        :key="item.id"
      >
        <p class="title">{{ item.name }}好物</p>
        <ul class="goodscard">
          <router-link
            :to="`/category/list/info/${ele.id}`"
            v-for="ele in item.goodsList"
            :key="ele.id"
          >
            <img class="img" :src="ele.list_pic_url" alt="" />
            <p class="cardtitle">{{ ele.name }}</p>
            <p class="cardprice">￥{{ ele.retail_price }}</p>
          </router-link>
          <div class="more">
            {{ item.name }}好物
            <van-icon class="moreicon" name="arrow" />
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import index from "@/api/home/index";
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      active: "home",
      homeInfo: {},
      value: "",
      location: "",
    };
  },
  computed: {
    ...mapState(["cityInfo"]),
  },
  mounted() {
    // ip定位
    var _this = this;

    if (this.cityInfo.name) {
      this.location = this.cityInfo.name;
      return;
    }
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          console.log(result);
          // 查询成功，result即为当前所在城市信息
          _this.location = result.city;
        }
      });
    });
  },
  created() {
    index().then((res) => {
      console.log(res);
      this.homeInfo = res;
    });
  },
  methods: {
    homeClick(id) {
      this.$router.push({
        path: "/topic/detail",
        query: {
          id: id,
        },
      });
    },
    goInfo(id) {
      this.$router.push({
        path: `/category/list/info/${id}`,
      });
    },
    goProduct(id) {
      this.$router.push({
         path: "/home/product",
          query: {
          id:id
        },
      
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
.home {
  position: relative;

  .searchbox {
    width: 539px;
  }
  .location {
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
    position: absolute;
    right: 54px;
    top: 35px;
  }
  .top {
    margin-bottom: 19px;
    .my-swipe {
      padding: 0 10px;
      .banner {
        width: 100%;
      }
    }
    .img {
      width: 100px;
    }
    .tab {
      display: flex;
      justify-content: space-around;
      margin: 47px 0 50px 0;
      text-align: center;
      img {
        width: 69px;
        height: 69px;
      }
      .tab-title {
        font-size: 26px;
        color: #666666;
        margin-top: 16px;
      }
    }
  }
  .brand {
    height: 570px;
    .title {
      font-size: 38px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 600;
      margin-top: 41px;
      margin-bottom: 33px;
      text-align: center;
    }
    .list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .image {
        width: 350px;
        height: 196px;
        position: relative;
        img {
          width: 100%;
        }
        .listtitle {
          position: absolute;
          left: 33px;
          top: 23px;
          z-index: 90;
          .big {
            font-size: 30px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
            z-index: 90;
          }
          .small {
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
            z-index: 90;
          }
        }
      }
    }
  }
  .first {
    width: 710px;
    height: 272px;
    margin: 20px auto;

    img {
      width: 100%;
    }
  }
  .firstswiper {
    height: 491px;
    display: flex;
    overflow: auto;
    white-space: nowrap;
    padding: 0 20px;
    // padding: 20px;
    .firstswiper-div {
      width: 300px;
      height: 416px;
      border-right: 1px solid #d7d6d6;
      img {
        width: 254px;
        height: 254px;
      }
      .text {
        width: 254px;
        overflow: hidden;
        padding: 35px;
        .div-one {
          width: 210px;
          font-size: 30px;
          color: #333333;
          font-weight: 500;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .div-two {
          width: 216px;
          font-size: 24px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .div-three {
          width: 53px;
          font-size: 24px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          margin-top: 23px;
        }
      }
    }
  }
  .special {
    height: 626px;
    .title {
      margin-top: 20px;
      height: 130px;
      line-height: 130px;
      font-size: 38px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 600;
      text-align: center;
    }
    .special-c {
      display: flex;
      overflow: auto;
      white-space: nowrap;
      width: 750px;

      img {
        width: 556px;
        height: 309px;
        margin-bottom: 21px;
      }
      .special-c-eg {
        margin-left: 20px;
        position: relative;

        .eg-title {
          width: 330px;
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-bottom: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .eg-price {
          font-size: 24px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          position: absolute;
          right: 0px;
          top: 334px; // margin-left: 161px;
        }
        .eg-content {
          width: 216px;
          font-size: 24px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  .goodgoods {
    .goodslist {
      .title {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
        text-align: center;
      }
      .goodscard {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        img {
          width: 350px;
          height: 350px;
        }
        .cardtitle {
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-left: 21px;
          width: 313px;
          text-overflow: ellipsis;
        }
        .cardprice {
          font-size: 26px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          margin-left: 21px;
          margin-top: 5px;
        }
        .more {
          width: 350px;
          height: 350px;
          font-size: 32px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          text-align: center;
          line-height: 350px;
        }
        .moreicon {
          width: 58px;
          height: 58px;
        }
      }
    }
  }
}
</style>